<template>
    <view
        class="pages u-skeleton"
        :class="GlobalThemes.commonBackGroundClass"
        :style="{ minHeight: bodyMinHeight + 'px', overflow: 'hidden' }"
    >
        <view
            :style="videoStyle"
            id="myVideo"
            v-show="!isShowPoster && !isShowxx"
        ></view>
        <view class="video-box-loading" v-show="isShowPoster && !isShowxx">
            <image :src="poster" :style="videoStyle"></image>
        </view>
        <view class="player-box minHeight showxx-title " :style="isShowxx ? statusMaskTop : ''" v-show="isShowxx">
            <image
                class="u-skeleton-rect"
                :lazy-load="true"
                style="width: 50%;margin-top: 10px;"
                :src="
                    videoInfo.vod_pic && videoInfo.vod_pic.substr(0, 4) == 'http'
                        ? videoInfo.vod_pic
                        : imageUrl + videoInfo.vod_pic
                "
            ></image>
        </view>
        <!-- 下面内容 -->
        <view :style="contentStyle">
            <view
                class="wxmp-goabout"
                v-if="
                    sysconf &&
                        sysconf.wxwp_switch &&
                        member_group < sysconf.member_group_limit &&
                        (sysconf.member_group_switch ||
                            sysconf.show_xx ||
                            saveModel)
                "
            >
                <text class="text-green">
                    {{ sysconf && sysconf.wxmp_btn_text }}
                </text>
                <image
                    @click="goAbout"
                    class="logo"
                    :src="wxmp_btn_img"
                ></image>
            </view>

            <view class="">
                <!-- 标题 -->
                <view class="cu-bar">
                    <view class="video-title">
                        <text
                            class="text-df text-bold font-size-uni u-skeleton-rect"
                        >
                            {{ videoInfo.title }}
                        </text>
                        <text class="text-df u-skeleton-rect">
                            评分：{{ videoInfo.vod_score || '-' }}
                        </text>
                    </view>
                </view>

                <!-- 反馈按钮等 -->
                <view class="btns u-skeleton-fillet">
                    <view>
                        <button @click="kefuBtn">
                            <u-icon
                                :color="typelist[tabIndex].color"
                                name="kefu-ermai"
                                label="客服"
                                size="40"
                            ></u-icon>
                        </button>
                    </view>
                    <view>
                        <button @click="report">
                            <u-icon
                                :color="typelist[tabIndex].color"
                                name="info-circle"
                                label="反馈"
                                size="40"
                            ></u-icon>
                        </button>
                    </view>
                </view>
            </view>

            <!-- 播放源 -->
            <view class="" v-if="!froms && !isShowxx">
                <view class="cu-bar xuanji">
                    <view class="fl">
                        <text
                            class="text-df text-bold font-size-uni u-skeleton-rect"
                        >
                            {{ i18n.videoSource }}
                        </text>
                    </view>
                </view>
                <view
                    class="padding-sm flex flex-wrap grid col-5 u-skeleton-fillet"
                >
                    <scroll-view
                        scroll-x
                        class="nav"
                        scroll-with-animation
                        :scroll-left="scrollLeft"
                    >
                        <view
                            class="video-level cu-tag u-skeleton-rect"
                            :style="{
                                backgroundColor:
                                    item == vodPlayFromTab
                                        ? typelist[tabIndex].color
                                        : '#ffffff',
                                color:
                                    item == vodPlayFromTab
                                        ? '#ffffff'
                                        : '#000000',
                                border:
                                    item == vodPlayFromTab
                                        ? '1px solid ' +
                                          typelist[tabIndex].color
                                        : '1px solid #e3e3e3'
                            }"
                            v-for="(item, index) in vodPlayFrom"
                            :key="index"
                            @tap="tabPlayFromSelect(item)"
                            :data-id="index"
                        >
                            <text>{{ item }}</text>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <!-- 剧集/源 -->
            <view class="" v-if="!froms && !isShowxx">
                <!-- 电视剧选集 -->
                <view class="cu-bar xuanji" v-if="videoInfo.type != 1">
                    <view class="fl" @click="xuanjiSort">
                        <text
                            class="text-df text-bold font-size-uni u-skeleton-fillet"
                        >
                            {{ i18n.xuanji }}
                        </text>
                        <u-icon
                            :name="xuanjiSortName"
                            custom-prefix="custom-icon"
                            :color="typelist[tabIndex].color"
                            size="30"
                        ></u-icon>
                    </view>
                    <view class="fr">
                        <text
                            v-show="showCopy || saveModel"
                            class="text-grey text-sm"
                            style="padding-right: 30rpx;"
                        >
                            点击下方按钮复制播放地址
                        </text>
                        <text class="text-grey text-sm">
                            {{ i18n.gong
                            }}{{
                                (vodPlayFromTab != '' &&
                                    videoInfo.srcList[vodPlayFromTab].length) ||
                                    '-'
                            }}{{ i18n.ji }}
                        </text>
                    </view>
                </view>
                <!-- 电影选源 -->
                <view class="cu-bar xuanji u-skeleton-fillet" v-else>
                    <view class="fl">
                        <text class="text-df text-bold font-size-uni">
                            {{ i18n.videoAnthology }}
                        </text>
                    </view>
                    <view class="fr">
                        <text
                            v-show="showCopy || saveModel"
                            class="text-grey text-sm"
                            style="padding-right: 30rpx;"
                        >
                            点击下方按钮复制播放地址
                        </text>
                        <text class="text-grey text-sm">
                            {{ i18n.gong
                            }}{{
                                vodPlayFromTab != '' &&
                                    videoInfo.srcList[vodPlayFromTab].length
                            }}{{ i18n.ge }}
                        </text>
                    </view>
                </view>
                <!-- 集/源 tab -->
                <view
                    class="padding-sm flex flex-wrap grid col-5 u-skeleton-fillet"
                    :class="cssAnimation ? 'right-animation' : ''"
                >
                    <scroll-view scroll-y scroll-with-animation>
                        <view class="nav">
                            <view
                                class="view-item"
                                :style="{
                                    backgroundColor:
                                        index == TabCur
                                            ? typelist[tabIndex].color
                                            : '#ffffff',
                                    color:
                                        index == TabCur ? '#ffffff' : '#000000',
                                    border:
                                        index == TabCur
                                            ? '1px solid ' +
                                              typelist[tabIndex].color
                                            : '1px solid #e3e3e3'
                                }"
                                v-for="(item, index) in videoInfo.srcList[
                                    vodPlayFromTab
                                ]"
                                :key="index"
                                @tap="tabSelect"
                                :data-id="index"
                            >
                                <text>{{ item.name }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="">
                <view class="cu-bar">
                    <view class="video-title">
                        <text
                            class="text-df text-bold font-size-uni u-skeleton-rect"
                        >
                            简介
                        </text>
                    </view>
                </view>
                <!-- 简介 -->
                <view class="video-desc-box u-skeleton-fillet">
                    <view class="padding-10 video-desc text-sm">
                        <u-read-more
                            ref="uReadMore"
                            show-height="200"
                            :toggle="true"
                            :close-text="i18n.more"
                            :color="typelist[tabIndex].color"
                        >
                            <u-parse
                                :html="videoInfo.remark"
                                @load="parseLoaded"
                            ></u-parse>
                        </u-read-more>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import hex_md5 from '@/common/md5.js';
import configs from '@/common/config.js';
import util from '@/utils/utils.js';
import Base64Image from '@/packageA/static/images.js';
const MyApp = getApp();
const globalData = MyApp.globalData;
export default {
    computed: {
        i18n() {
            return globalData.$t('detail');
        }
    },
    data() {
        return {
            poster: '',
            xuanjiSortName: 'sort-down',
            showCopy: 0,
            tabIndex: 0,
            typelist: globalData.typelist,
            showControls: true,
            // 视频加载字
            VodLoadText: globalData.$t('detail').vodLoadText,
            // 是否显示视频控件
            isShowControl: false,
            // 视频是否填充
            fill: 'contain',
            // 倍速播放索引
            playbackRateIndex: 2,
            // 倍速设置选项列表
            playbackRateList: ['0.5', '0.8', '1.0', '1.2', '1.5', '2.0'],
            cssAnimation: false,
            isMp: true,
            isShowxx: true,
            loadingBoxText: globalData.$t('detail').loadingText,
            videoAd: '',
            imageUrl: this.$config.imageUrl,
            apiImageUrl: this.$config.apiImageUrl,
            showAdModel: false,
            playerADStyle: '',
            bodyMinHeight: '',
            statusMaskTop: '',
            scrollLeft: 0,
            TabCur: 0,
            isback: false,
            isLike: false,
            videoInfo: {
                srcList: [
                    {
                        name: '',
                        url: ''
                    }
                ],
                recommend: [],
                title: '',
                playIndex: 0,
                liveMode: false,
                remark: '',
                type: 0,
                currentTime: 0,
                danmuList: [],
                downLoadList: [],
                vod_pic: ''
            },
            vod_id: 0,
            videoType: 0,
            vid: 0,
            videoStyle: '',
            videoUrl: '',
            vodPlayFrom: '',
            vodPlayFromTab: '',
            currentTime: 0,
            playCurrentTime: 0,
            videoContext: null,
            gobackView: null,
            windowInfo: {
                statusBarHeight: 0,
                windowHeight: 0,
                windowWidth: 0,
                trueHeight: 0
            },
            contentStyle: '',
            playerAd: {
                img: '',
                url: ''
            },
            playerBottomAD: {
                img: '',
                url: '',
                isshow: 0
            },
            playerTopAD: {
                img: '',
                url: '',
                isshow: 0
            },
            customAD: {
                img: '',
                url: '',
                isshow: 0
            },

            isIos: this.$os == 'ios',
            isPlaying: false,
            isShowPoster: true,
            isPause: false,
            showXuanji: false,
            xuanjiMask: false,
            isFullscreen: false,

            //倍速菜单
            rate: 'x1',
            //倍速文本,
            animation: null,
            animationMenu: null,
            showRate: true,
            adInfo: uni.getStorageSync('adInfo') || [],
            kefuSwitch: uni.getStorageSync('sys_config').kefu_switch || 0,
            showAdFirst: 0,
            sysconf: null,
            showAdHalf: false,
            halfTimeShowAd: 900,
            changeYuan: false,
            trueVideoUrl: '',
            navTitle: '',
            member_group: 0,
            wxmp_btn_img: Base64Image.wxmp_btn,
            // 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
            statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
            // 导航栏内容区域高度，不包括状态栏高度在内
            navbarHeight: 44,
            loading: true,

            playAdControl: 1,
            isClickCancel: false,
            isAdEnd: false,
            isAdShow: false,

            adTimer: null,
            adStep: 1,
            adCountTime: 5,

            hideTime: 0,

            watingPlayTimer: null,
            watingNum: 1,
            playingNum: 1,

            isShowModel: false,

            windowSizeWidth: 0,

            picModel: uni.getStorageSync('pictureModel') ? ['pop'] : [],

            saveModel: 0
        };
    },
    watch: {
        videoUrl(newVal, oldVal) {
            let _this = this;
            if (newVal != '' || _this.changeYuan) {
                _this.getAnalysis(newVal);
            }
        }
    },
    onShow() {
        this.tabIndex = uni.getStorageSync('tabIndex') || 0;
    },
    mounted() {},
    onLoad(option) {
        this.vid = option.id;
        if (!this.vid) {
            uni.showModal({
                title: '提示',
                content: '未找到该信息',
                showCancel: false,
                success() {
                    uni.navigateBack({});
                }
            });
            return false;
        }
        if (option.hasOwnProperty('tab')) {
            this.TabCur = option.tab;
        }
        this.pageInit();
        this.getSysConfig();
    },
    methods: {
        pageInit() {
            let _this = this;
            const res = uni.getSystemInfoSync();
            _this.windowInfo.statusBarHeight = res.statusBarHeight;
            _this.windowInfo.windowWidth = res.windowWidth;
            _this.windowInfo.windowHeight = res.windowHeight;
            _this.windowInfo.trueHeight =
                _this.windowInfo.windowHeight -
                _this.windowInfo.statusBarHeight -
                50;
            _this.videoHeight = _this.windowInfo.trueHeight / 3;
            _this.bodyMinHeight =
                'min-height:' +
                _this.windowInfo.windowHeight +
                'px;overflow: hidden;';
            _this.screenWidth =
                'width:' + _this.windowInfo.windowWidth * 2 + 'px';

            _this.contentStyle =
                'height:' + _this.windowInfo.windowHeight + 'px;padding:0 10px';

            _this.videoStyle =
                'width: 750rpx;height:' + _this.videoHeight + 'px;';

            _this.playVideo();
        },
        getAnalysis: function(newVal) {
            let _this = this;
            uni.showLoading({
                mask: true,
                title: '加载中'
            });
            this.$http
                .post('/videos/analysis/getAnalysis', {
                    url: MyApp.tools.encode(encodeURIComponent(newVal)),
                    vid: _this.vod_id,
                    vtitle: _this.videoInfo.title
                })
                .then(res => {
                    uni.hideLoading();
                    if (res.code != 200) {
                        return false;
                    }
                    _this.isFirst = false;
                    _this.changeYuan = false;
                    _this.trueUrl = res.data;
                    _this.isShowPoster = false;
                    if (!_this.isShowxx) {
                        _this.dp = new DPlayer({
                            container: document.getElementById('myVideo'),
                            autoplay: true,
                            video: {
                                url: _this.trueUrl,
                                type: 'hls'
                            }
                        });
                    }
                })
                .catch(res => {
                    uni.hideLoading();
                });
        },
        changeVideoInfo(index) {
            let _this = this;
            _this.changeYuan = true;
            _this.TabCur = index;
            _this.videoUrl = '';
            _this.videoUrl =
                _this.videoInfo.srcList[_this.vodPlayFromTab][index].url;

            let title =
                _this.videoInfo.title +
                (_this.isShowxx
                    ? ''
                    : ' - ' +
                      _this.videoInfo.srcList[_this.vodPlayFromTab][index]
                          .name);
            uni.setNavigationBarTitle({
                title: title
            });
        },
        playVideo() {
            let _this = this;
            this.$http
                .post('/videos/videos/getVideoDetail', {
                    vid: _this.vid,
                    index: _this.TabCur,
                    app: 1
                })
                .then(res => {
                    if (res.code != 200 || !res.data) {
                        uni.showModal({
                            content:
                                res.data.msg ||
                                globalData.$t('detail').notFindVideoInfo,
                            showCancel: false,
                            success() {
                                uni.navigateBack();
                            }
                        });
                        return false;
                    }
                    _this.vod_id = res.data.vid;
                    _this.videoInfo.srcList = res.data.srcList;
                    _this.videoInfo.title = res.data.title;
                    _this.videoInfo.vod_pic = res.data.vod_pic;
                    _this.videoInfo.vod_time = res.data.vod_time;
                    _this.videoInfo.vod_year = res.data.vod_year;
                    _this.videoInfo.vod_actor = res.data.vod_actor;
                    _this.videoInfo.remark = res.data.remark;
                    _this.videoInfo.type = res.data.type;
                    _this.videoInfo.count = res.data.count;
                    _this.vodPlayFrom = res.data.vod_play_from;
                    _this.vodPlayFromTab = _this.vodPlayFrom[0];
                    _this.videoInfo.vod_score = res.data.vod_score;
                    _this.isLike = res.data.isLike;
                    _this.currentTime = uni.getStorageSync(
                        hex_md5(_this.videoInfo.title + _this.TabCur)
                    );
                    _this.changeVideoInfo(_this.TabCur);
                })
                .catch(err => {
                    uni.hideLoading();
                    _this.loading = false;
                });
        },
        getSysConfig() {
            let _this = this;
            _this.$http
                .post('/videos/config/getConfig', {})
                .then(res => {
                    let sys;
                    if (res.code != 200) {
                        sys = uni.getStorageSync('sys_config');
                    } else {
                        sys = res.data;
                        uni.setStorageSync('sys_config', res.data);
                    }
                    _this.sysconf = sys;
                    _this.showCopy = _this.sysconf.copy_url;
                    _this.isShowxx = _this.sysconf.show_xx;
                    _this.saveModel = _this.sysconf.save_model;
                    _this.playAdControl = _this.sysconf.play_ad_control;
                    _this.showAdFirst = _this.sysconf.play_start_ad;
                    _this.showAdHalf = _this.sysconf.show_ad_half;
                    _this.halfTimeShowAd = _this.sysconf.show_ad_time;
                    _this.loadingBoxText = globalData.centerShowxx
                        ? globalData.$t('detail').loadingText
                        : globalData.$t('detail').analysisText;
                    _this.poster = _this.apiImageUrl + sys.video_poster;
                    // 会员等级
                    _this.memberGroupLimit(res.data.userinfo);
                })
                .then(v => {
                    setTimeout(v => {
                        _this.playVideo();
                    }, 100);
                });
        },
        memberGroupLimit(userinfo) {
            let _this = this;
            // 是否开启了会员等级控制
            if (_this.sysconf.member_group_switch) {
                // 如果当前不是审核状态
                if (!_this.isShowxx) {
                    // 如果当前登录会员等级低于后台设定等级，不予播放;如果未登录，不予播放；如果用户被锁定，不予播放
                    if (
                        !userinfo.hasOwnProperty('group_id') ||
                        userinfo.group_id < _this.sysconf.member_group_limit ||
                        userinfo.islock
                    ) {
                        _this.isShowxx = true;
                        _this.pageInit();
                    } else {
                        _this.member_group = userinfo.group_id;
                        _this.froms = 0;
                    }
                } else {
                    // 如果当前已登录，是审核状态，但是会员等级高于设定等级并且未被锁定
                    if (
                        userinfo.hasOwnProperty('group_id') &&
                        userinfo.group_id >= _this.sysconf.member_group_limit &&
                        !userinfo.islock
                    ) {
                        _this.member_group = userinfo.group_id;
                        _this.isShowxx = false;
                        _this.froms = 0;
                    }
                }
            } else {
                if (userinfo.hasOwnProperty('group_id') && userinfo.islock) {
                    _this.member_group = userinfo.group_id;
                    _this.isShowxx = true;
                }
                _this.froms = 0;
            }
        },
        parseLoaded() {
            this.$refs.uReadMore.init();
        },
        tabSelect(e) {
            if (e.currentTarget.dataset.id != this.TabCur) {
                this.TabCur = e.currentTarget.dataset.id;
                // this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
                this.currentTime = 0;
                this.playAdControl = 1;
                this.isShowModel = false;
                uni.setStorageSync(
                    hex_md5(this.videoInfo.title + this.TabCur),
                    0
                );
                this.changeVideoInfo(e.currentTarget.dataset.id);
            }
        },
        tabPlayFromSelect(e) {
            let _this = this;
            if (e != _this.vodPlayFromTab) {
                _this.vodPlayFromTab = e;
                // _this.TabCur = -1;
                _this.changeVideoInfo(_this.TabCur);
                _this.cssAnimation = true;
                MyApp.showLoading(_this.$refs.loading, function() {
                    _this.cssAnimation = false;
                });
            }
        },
        kefuBtn() {
            let _this = this,
                tmp = [];
            tmp.push(_this.apiImageUrl + _this.sysconf.kefu_qrcode);
            uni.previewImage({
                urls: tmp,
                longPressActions: {
                    success: function(data) {},
                    fail: function(err) {}
                },
                complete(res) {}
            });
        },
        report() {
            let _this = this,
                params = {
                    vod_play_from: _this.vodPlayFromTab,
                    vod_id: _this.vod_id,
                    vod_name: _this.videoInfo.title,
                    vod_index:
                        _this.videoInfo.srcList[_this.vodPlayFromTab][
                            _this.TabCur
                        ].name,
                    remark: ''
                };
            uni.showModal({
                title: '提示',
                content:
                    '如果当前视频无法播放，点击“一键反馈”给我们，我们将处理该问题',
                confirmText: '一键反馈',
                success: function(res) {
                    if (res.confirm) {
                        _this.$http
                            .post('/videos/report/report', params)
                            .then(res => {
                                if (200 == res.code) {
                                    uni.showToast({
                                        title: '反馈成功，感谢支持',
                                        mask: true,
                                        icon: 'none'
                                    });
                                }
                            });
                    }
                }
            });
        }
    }
};
</script>

<style>
.pages {
    min-height: 100vh;
}

.padding-1 {
    padding: 1upx;
}
.padding-2 {
    padding: 2upx;
}
.padding-3 {
    padding: 3upx;
}
.padding-4 {
    padding: 4upx;
}
.padding-5 {
    padding: 5upx;
}
.padding-6 {
    padding: 6upx;
}
.padding-7 {
    padding: 7upx;
}
.padding-10 {
    padding: 10upx;
}
.padding-15 {
    padding: 15upx;
}
.padding-20 {
    padding: 20upx;
}
.padding-25 {
    padding: 25upx;
}
.padding-lr-5 {
    padding: 0 5upx;
}
.padding-lr-6 {
    padding: 0 6upx;
}
.padding-lr-10 {
    padding: 0 10upx;
}
.padding-lr-15 {
    padding: 0 15upx;
}
.padding-lr-25 {
    padding: 0 25upx;
}
.padding-lr-30 {
    padding: 0 30upx;
}
.padding-lr-42 {
    padding: 0 42upx;
}

.padding-tb-5 {
    padding: 5upx 0;
}
.padding-tb-10 {
    padding: 10upx 0;
}
.padding-tb-15 {
    padding: 15upx 0;
}
.padding-tb-20 {
    padding: 20upx 0;
}
.padding-tb-25 {
    padding: 50upx 0;
}
.padding-tb-30 {
    padding: 60upx 0;
}
.padding-tb-35 {
    padding: 70upx 0;
}

.padding-top-442 {
    padding-top: 442upx;
}
.padding-top-2 {
    padding-top: 400upx;
}
.padding-top-2-15 {
    padding-top: 415upx;
}

.margin-top-5 {
    margin-top: 5upx;
}
.margin-top-6 {
    margin-top: 6upx;
}
.margin-top-7 {
    margin-top: 7upx;
}
.margin-top-8 {
    margin-top: 8upx;
}

.uni-input-input {
    height: auto;
}
.bottom-nav {
    bottom: 0;
    top: inherit !important;
}
.movie-img {
    min-height: 300upx;
    max-height: 300upx;
}
.movie-img image {
    width: 100% !important;
}
.grid.col-3 > uni-view {
    min-height: 300upx;
    max-height: 300upx;
    height: 300upx;
}
.video-text {
    color: #fff;
    height: 20px;
    line-height: 20px;
    text-align: end;
    padding: 3px;
}
.nav-arrow:before {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    display: block;
    margin: auto;
    width: 15px;
    height: 15px;
    color: #8799a3;
    content: '\E6A3';
    text-align: center;
    font-size: $uni-font-size-sm;
    font-family: cuIcon;
    line-height: 15px;
}
.video-more-text {
    margin-right: 35px;
}
.grid.col-3.grid-square > uni-view {
    padding-bottom: 0px;
}
.filter-item {
    padding: 12px;
    margin-right: 5px;
}
.cate-img {
    min-height: 300upx;
    max-height: 300upx;
    position: relative;
}
.cate-box {
    max-height: 300upx;
    position: relative;
}
.list-img {
    height: 300upx;
}
.cate-text {
    padding: 0 5px !important;
    min-height: 45px;
    line-height: 45x;
    position: absolute;
    width: 100%;
    top: 0px;
}
.list-box {
    padding: 10px;
}
.web-views {
    max-height: 200px;
}
.minHeight {
    min-height: calc(100% / 3);
}
.padding-top-3 {
    padding-top: calc(100% - 100% / 3);
}
.status-mask {
    height: 30px;
    background: #000;
    z-index: 999;
    position: fixed;
    width: 100%;
}
.xuanji {
    min-height: 40upx !important;
    margin-top: 40upx;
}
.xuanji view text {
    padding-right: 10rpx;
}
.video-desc {
}
.video-desc-box {
    padding: 0 10px;
}
.mask {
    min-height: 250px;
    position: relative;
}
.refresh-text {
    margin: 0 auto;
    text-align: center;
    margin-top: 10%;
}
.refresh-img {
    width: 80px !important;
    height: 80px !important;
}
.movie-text {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto;
}
.download-list-text {
    width: 80%;
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto;
}
@keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
.movie-text-box {
    width: 100%;
    height: 300rpx !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.banner-text {
    position: absolute;
}
.btn-clear {
    border-radius: 0px;
    border: none;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    font-size: $uni-font-size-sm;
    text-align: center;
    text-decoration: none;
    line-height: 0;
    background: none;
}
.controls-sendtv {
    color: #ffffff;
    width: 55upx;
    height: 45upx;
    right: 35upx;
    top: 45upx;
    position: absolute;
}

.user-like,
.user-download {
    display: inline-table;
}

.bg-myblue {
    background-color: #1296db;
}
.line-myblue {
    color: #1296db;
}
.progress-heigth {
    height: 10upx;
}
.download-list {
    margin: 0 10upx;
}

.video-list-item {
    height: 300upx;
    min-height: 300upx;
}

.border-none {
    border: none;
}

/* 插屏广告 */
.uni-image {
    position: relative;
}

.uni-image-close {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
}
.player-bottom-ad image {
    width: 100%;
    height: 270upx;
}

cover-view,
cover-image {
    display: inline-block;
}

.video-title {
    display: flex;
    flex-direction: row !important;
    width: 100%;
    justify-content: space-between !important;
}
.video-title text:nth-child(1) {
    width: 78%;
}
.showxx-title {
    text-align: center;
}
.xuanji-bottom {
    padding: 30upx;
}
.xuanji-box {
    border-top-left-radius: 10upx !important;
    border-top-right-radius: 10upx !important;
}
.xuanji-item {
    border-radius: 10upx !important;
}
.xuanji-item-box {
    overflow-y: auto;
}
.nav {
    width: 100%;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.nav .video-level {
    border-radius: 10upx !important;
    border: 1px solid #e7ebed;
    padding: 18px 10px !important;
    text-align: center;
}
.nav .view-item {
    border-radius: 10upx !important;
    border: 1px solid #e7ebed;
    padding: 8px 12px !important;
    text-align: center;
    width: 22.5%;
    margin: 0 5px 5px 3px;
}
.nav .cu-item {
    height: 25px !important;
    line-height: 25px !important;
}

.flotage {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.flotageYY {
    position: absolute;
    left: 54%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.flotageY {
    position: absolute;
    right: 30rpx;
    top: 40%;
    transform: translateY(-50%);
}
.video-box {
    position: relative;
}
.speed {
    display: flex;
    align-items: center;
}

.load-video-text {
    color: #fff;
    position: absolute;
    border: 0;
    font-size: $uni-font-size-sm;
}

@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    to {
        background-position: -100% 0;
    }
}

.right-animation {
    -webkit-animation: fadeInRightBig 0.3s 0.2s ease both;
    -moz-animation: fadeInRightBig 0.3s 0.2s ease both;
}
@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(1000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -moz-transform: translateX(1000px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
.xuanji-mask {
    position: absolute;
    top: 0;
    left: 0;
    padding: 80rpx;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0, 0.9);
    z-index: 19910528;
    align-content: center;
}
.xuanji-mask-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 19990704;
}
.xuanji-mask-item view {
    align-content: center;
    text-align: center;
    align-items: center;
    padding: 30rpx 25rpx;
    font-size: $uni-font-size-sm;
    border-radius: 10rpx;
    margin: 20rpx 20rpx 0 20rpx;
}
.btns {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.btns view {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.btns view:nth-child(1) {
    padding-right: 20rpx;
}
.btns view:nth-child(2) {
    padding-right: 20rpx;
}
.btns view:nth-child(3) {
    padding-right: 20rpx;
}
.btns view:nth-child(4) {
    padding-right: 20rpx;
}
.btns view button {
    line-height: inherit;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
.btns view button::after {
    border: none;
}

.font-size-uni {
    font-size: $uni-font-size-sm;
}
.video-box-loading {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wxmp-goabout {
    margin-top: 10px;
    text-align: center;
}
.wxmp-goabout .logo {
    width: 750rpx;
    height: 90rpx;
    overflow: hidden;
    margin: 10rpx 0rpx;
    background-position: center;
    justify-content: center;
}
.wxmp-goabout text {
}

@font-face {
    font-family: 'custom-icon'; /* Project id 2739663 */
    /* Color fonts */
    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVwAAwAAAAACzQAAAUjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAImwjGgZgAFwKjhyLJQE2AiQDLAsqAAQgBYIUByAbwAjIDiUAAMAAUCgKQD78e9afNKlyKy+AgTNWMQA6HS+TXbfPTds1vx79BaHvfZFBPNhOI1Wp83suk3fpSgftwgd0AY7IzGz9qbXRcSyYUN5hqLRCQc4h3Q7J69uD7AUAlAB0AFKhhQwAha6lwEjI390yKKBUgkqogyoQ0cCy3BWNJOvWAdAfqnWguBowIIwHmEgxdwM0KKEX1QQ03kuV3gGGAXUP5GBkJ2R9ACo5E6oPCVQCMIUy4CVVX1WIZ7A0fo7mJR5oHkotKNRirOwVAEthykWhuZbiRdYyKKlErqpppy+Nr4wnxyvi7vg5SUpgWNW6c6UvnJ86X3E+4rzfOZDtSq9cC01fC2AVICsV+d96bmGqvPy9nwENhaVNBkb2OsG0WqVaYjQaDGboWLFepXyq8vSdc/zsqZ2xmO2E611vVLSI1nc8EWfEEwL/NgUm+G4gwntYKmaDxyr8O1S8IWyL0Ce4lfVG5eWTl8GvdIts0HaFoqBXWHN1nUf5h+4YJdi8UTZoEQHeGrF32160M/Q0JReeYnXBJ8DwT5JZhr9mwg2XaTeJPnS9JRRLjUPzTr7tfIQ02w0zCKGHZGdGYrf8djbMvHst1R6MUkKM8oVi9liMkFAEgmjJkcW8WPJhQRvl2xlq5rJW2HOShK7Xnl1+OsErlHBzlCL9lJdmd7I98BTZGY1aLq182y1GanTE93yxNTGfQFKS7lrpVtYTdCvol5ztwjW+GAlZLwPYy6+8tN6rDPOJ4K2eusC+P1CwRS0dNuys6rLuu4Oh9HLdcCgC8CLLNr6YkG9uZ501h+zZUo6GCEJGpHwtmW5Mz854PiOlfhqpX/6x7bnvpV10JeQnIpvmPwW//GozLmb6/yENSULqvvV1FauEe/InZlLrXljV+u5oEtd/t390231GY3PBufm5swUtzYIkGQnNLQVn5+fRPGJ/ZnSL2X4/F/a4OdHvFzm3J8z5/dmi21h8xDDCObAuZZVe/R5evJ9zOLmeig8MGvH24iWDdR8aifjkkocWP3lrn+kHSxbfviU08t1qVfdkU4KCWbaffYjsPzCzuMl+XE9PRZ6cWXqAPcnC9GkknlMvnF3YJ/JFOfzGfanmG+Y+NHBIQRn7sjqARaz6U9bcTE7/MQT2mPDOY73Snjxm5Kv9yvxs1K0T8X+Bh73Kl1V0HlM8Tu9MSHiGzle9rII14XCa2x3luH00QZbAbvJiKe1qEW6BEnc2VmS7rddp3tRolmtKk/d2dOxNLi0VJMkoKOWXaTZpyAocDsBZxZnew+/3sO3nMWh8j/qBtVu16oU6h3oiP3VmVUXdO6NJowPcd8p379vWOwnnCubmC86SIElc3NzSS2zVe0eKLwpz6BA5ByeWcuHq1BuPFGPp6pQdvTJGWjnndFDWxQ8t8anUIfIQ62vscS4Lq+FD74fte1tUVL2EKL0UR4+QH0iAfE/myP+ESKTVR6SuCaexQwDZUu37yxmTgrmkoXVf8z953dzyA2nzhYUUjtBceTVxzpnlT37Urs/8TUVvye2fVPVdlyfdAKQ7+0eaB64FsgT6P0WLuLuB/nHl16JoAeFiAX23FeJRnAYEXEJfHXEUZ/Ux/4+/TuMIRXVWfJ2vQBUaFKMGBdvfkg3IMN+GURqZWBllsBodUTlcOASF10vOodu0SVPGjdqEQd3a8DF1evXfzxrRKWAbNmPruzsDVaoFCnkNiXbadFxDhGRL4bUgcM8fDFhS2AYUUErjlZ10vwQA')
            format('woff2'),
        url('//at.alicdn.com/t/font_2739663_l6ggznz3qnh.woff?t=1630058026437')
            format('woff'),
        url('//at.alicdn.com/t/font_2739663_l6ggznz3qnh.ttf?t=1630058026437')
            format('truetype');
}

.custom-icon {
    font-family: 'custom-icon' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.custom-icon-beisu:before {
    content: '\e64c';
}

.custom-icon-contain:before {
    content: '\e6a0';
}

.custom-icon-fill:before {
    content: '\e636';
}

.custom-icon-kuaitui:before {
    content: '\e654';
}

.custom-icon-kuaijin:before {
    content: '\e624';
}

.custom-icon-sort-up:before {
    content: '\e652';
}

.custom-icon-sort-down:before {
    content: '\e653';
}
</style>
